import { List as AntdList, ListProps as AntdListProps } from 'antd';

/**
 * 导出列表组件
 * @template T - 数据源的类型
 * @param {AntdListProps<T>} props - 列表组件的属性
 * @param {T[]} props.dataSource - 列表数据源
 * @param {(item: T, index: number) => React.ReactNode} props.renderItem - 当使用 dataSource 时，可以用 renderItem 自定义渲染列表项
 * @param {React.ReactNode} props.header - 列表头部
 * @param {React.ReactNode} props.footer - 列表底部
 * @param {boolean} props.bordered - 是否展示边框
 * @param {boolean} props.split - 是否展示分割线
 * @param {boolean} props.loading - 当卡片内容还在加载中时，可以用 loading 展示一个占位
 * @param {'default' | 'large' | 'small'} props.size - list 的尺寸
 * @param {object} props.pagination - 对应的 pagination 配置
 * @param {'horizontal' | 'vertical'} props.itemLayout - 设置 List.Item 布局
 * @param {string} props.locale - 默认文案设置，目前包括空数据文案
 * @param {React.ReactNode} props.loadMore - 加载更多的内容
 * @param {'column' | 'row'} props.grid - 列表栅格配置
 * @returns {JSX.Element} 列表组件的 JSX 元素
 * @description 列表组件是 Ant Design 提供的通用列表组件，可承载文字、列表、图片、段落等内容，支持泛型以确保数据源的类型安全。
 * @example
 * <List
 *   dataSource={['Item 1', 'Item 2', 'Item 3']}
 *   renderItem={(item) => <List.Item>{item}</List.Item>}
 * />
 * @example
 * <List<User>
 *   dataSource={users}
 *   renderItem={(user) => (
 *     <List.Item>
 *       <List.Item.Meta
 *         title={user.name}
 *         description={user.email}
 *       />
 *     </List.Item>
 *   )}
 * />
 * @example
 * <List
 *   header={<div>Header</div>}
 *   footer={<div>Footer</div>}
 *   bordered
 *   dataSource={data}
 *   renderItem={(item) => <List.Item>{item}</List.Item>}
 * />
 */
export const List = <T = unknown,>(props: AntdListProps<T>) => {
  return <AntdList {...props} />;
};

// 默认导出
export default List;

// 重新导出 Ant Design 原生的 ListProps 类型
export type { AntdListProps as ListProps };
